<!--附件管理列表-->
<style lang="less">
    @import 'files_manage.less';
</style>

<template>
    <div id="files_manage">
        <Row>
            <Col span="24">
                <Card style="margin-bottom: 10px">
                    <Form inline ref="searchConf" :model="searchConf" class="cms_contentTable" @submit.native.prevent>
                        <FormItem prop="iscite">
                            <Select v-model="searchConf.iscite" clearable placeholder="请选择状态" @on-change="search"
                                    style="width:150px">
                                <Option :value="1">引用</Option>
                                <Option :value="0">非引用</Option>
                            </Select>
                        </FormItem>
                        <FormItem prop="filename">
                            <Input v-model="searchConf.filename" clearable placeholder="请输入标题..." style="width: 250px"
                                   @on-enter="search"></Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="search">查询</Button>
                        </FormItem>
                        <FormItem>
                            <Button @click="schReset('searchConf')">重置</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Col>
            <Col span="24">
                <Card>
                    <div>
                        <Table :loading="tableLoading" :columns="columnsList" :data="tableData" border disabled-hover>
                            <!--<template slot-scope="{ row, index }" slot="isheadimg">
                              <i-switch size="large" v-model="row.isheadimg === 1" disabled="disabled">
                                <span slot="open">YES</span>
                                <span slot="close">NO</span>
                              </i-switch>
                            </template>-->

                            <template slot-scope="{ row, index }" slot="iscite">
                                <i-switch size="large" v-model="row.iscite === 1" disabled="disabled">
                                    <span slot="open">YES</span>
                                    <span slot="close">NO</span>
                                </i-switch>
                            </template>

                            <template slot-scope="{ row, index }" slot="handle">
                                <!--<Button type="primary" style="margin-right: 5px" @click="edit(row.id, index)">编辑</Button>-->
                                <Poptip
                                    confirm
                                    title="您确定要删除这条数据吗?"
                                    :transfer='true'
                                    @on-ok="del(row, index)">
                                    <Button type="error">删除</Button>
                                </Poptip>
                            </template>
                        </Table>
                    </div>
                    <div class="margin-top-15" style="text-align: center;margin-top: 20px">
                        <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                              :page-size="tableShow.pageSize" @on-change="changePage"
                              @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <!--图片预览model-->
        <Modal v-model="imgModel" :footer-hide="true" class-name="imgPreview">
            <p slot="header" style="text-align: left">
                <span>图片预览</span>
            </p>
            <div style="text-align: center">
                <img :src="modelImg" width="100%">
            </div>
        </Modal>
    </div>
</template>

<script>
    import {CmsFilesManageListIndex, CmsFilesManageListDel} from '@/api/cms/files'

    export default {
        name: 'files_manage',
        data() {
            return {
                imgSrc: '',
                status: '是',
                columnsList: [
                    {
                        title: 'ID',
                        type: 'id',
                        width: 65,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {}, params.row.id)
                            ])
                        }
                    },
                    {
                        title: '预览',
                        key: 'imgurl',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.url)
                                return h('div', [
                                    h('img', {
                                        style: {
                                            height: "80px",
                                            width: "140px",
                                            verticalAlign: "middle",
                                            cursor: 'pointer',
                                            padding: '5px 10px'
                                        },
                                        attrs: {
                                            src: this.imgSrc + params.row.url
                                        },
                                        on: {
                                            'click': () => {
                                                if (params.row.url) {
                                                    this.modelImg = this.imgSrc + params.row.url
                                                    this.imgModel = true
                                                }
                                            }
                                        }
                                    },)
                                ])
                            else
                                return h('div', [
                                    h('span', {
                                        style: {
                                            height: "40px"
                                        },
                                    }, '暂无')
                                ])
                        }
                    },
                    {
                        title: '物理路径',
                        align: 'center',
                        key: 'url',
                        // width: 300,
                        render: (h, params) => {
                            return h('div', [
                                h('span', {}, this.isNull(params.row.url))
                            ])
                        }
                    },
                    {
                        title: '宽度',
                        width: 100,
                        align: 'center',
                        key: 'imgwidth',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {}, this.isNull(params.row.imgwidth))
                            ])
                        }
                    },
                    {
                        title: '高度',
                        width: 100,
                        align: 'center',
                        key: 'imgheight',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {}, this.isNull(params.row.imgheight))
                            ])
                        }
                    },
                    {
                        title: '图片类型',
                        align: 'center',
                        key: 'filetype',
                        width: 100,
                        render: (h, params) => {
                            return h('div', [
                                h('span', {}, this.isNull(params.row.filetype))
                            ])
                        }
                    },
                    {
                        title: '文件大小',
                        align: 'center',
                        width: 100,
                        key: 'filesize',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: '#28A753'
                                    }
                                }, this.isNull(params.row.filesize))
                            ])
                        }
                    },
                    {
                        title: '创建日期',
                        align: 'center',
                        key: 'createTime',
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    /* style: {
                                       color: '#FD6732'
                                     }*/
                                }, this.isNull(params.row.createTime))
                            ])
                        }
                    },
                    /* {
                       title: '标题IMG',
                       align: 'center',
                       key: 'isheadimg',
                       width: 100,
                       slot: 'isheadimg'
                     },*/
                    {
                        title: '标题IMG 且引用',
                        align: 'center',
                        key: 'iscite',
                        width: 130,
                        slot: 'iscite'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'handle',
                        width: 200,
                        slot: 'handle'
                    }
                ],
                tableLoading: false,
                tableData: [],
                tableShow: {
                    currentPage: 1,
                    pageSize: 10,
                    listCount: 0
                },
                searchConf: {
                    filename: '',
                    iscite: ''
                },
                imgModel: false, // 图片预览model
                modelImg: '' // 图片src
            }
        },
        created() {
            this.imgSrc = this.$imgSrc
            this.getList()
        },
        methods: {
            init() {
            },
            // 查询
            search() {
                this.tableShow.currentPage = 1
                this.getList()
            },
            // 重置
            schReset(name) {
                this.$refs[name].resetFields();
                this.getList()
            },
            // 分页
            changePage(page) {
                this.tableShow.currentPage = page
                this.getList()
            },
            changeSize(size) {
                this.tableShow.pageSize = size
                this.getList()
            },
            // 删除
            del(row, index) {
                let vm = this
                if (row.iscite === 1) {
                    let imgUrl = vm.$imgSrc + row.url
                    this.$Modal.confirm({
                        title: '当前图片已被引用! 是否强制删除？',
                        content: '<img src="' + imgUrl + '" style="width: 100%; height: 200px"/><p>注意：删除后无法恢复，请谨慎操作！</p>',
                        onOk: () => {
                            CmsFilesManageListDel({'id': row.id}).then(response => {
                                if (response.data.code === 1) {
                                    vm.tableData.splice(index, 1)
                                    vm.$Message.success(response.data.msg)
                                    vm.getList()
                                } else {
                                    vm.$Message.error(response.data.msg)
                                }
                            })
                        }
                    })
                } else {
                    CmsFilesManageListDel({'id': row.id}).then(response => {
                        if (response.data.code === 1) {
                            vm.tableData.splice(index, 1)
                            vm.$Message.success(response.data.msg)
                            vm.getList()
                        } else {
                            vm.$Message.error(response.data.msg)
                        }
                    })
                }
            },
            // 获取列表
            getList() {
                let vm = this
                vm.tableLoading = true
                let json = {
                    page: vm.tableShow.currentPage,
                    size: vm.tableShow.pageSize,
                    filename: vm.searchConf.filename,
                    iscite: vm.searchConf.iscite
                }
                CmsFilesManageListIndex(json).then(response => {
                    let res = response.data
                    vm.tableLoading = false
                    if (res.code === 1) {
                        vm.tableData = res.data.list
                        vm.tableShow.listCount = res.data.count
                    } else {
                        vm.$Message.error(res.msg)
                    }
                })
            },
            isNull(e) {
                if (e === '' || e === undefined || e === 'undefined' || e === null || e === 'null')
                    return '--'
                else
                    return e
            }
        },
        filters: {
            // 显示时间格式化
            timeType(e) {
                let moment = require('moment')
                let time = moment(e).format('YYYY-MM-DD HH:mm:ss')
                return time
            }
        }
    }
</script>
